<template>
	<view class="content">
		<view class="top-img">
			<image src="/static/image/share/top-bg.png" mode=""></image>
		</view>
		<view class="strategy"  @click="showRuler">
			<view class="infor-left">
				<image src="/static/image/share/goods.png" mode=""></image>
				<view>邀請攻略</view>
			</view>
			<image class="more" src="/static/image/index/more.png" mode=""></image>
		</view>
		<view class="bg1">
			<image src="/static/image/share/bg1.png" mode=""></image>
		</view>
		<view class="my-code">
			<image class="code" :src="showCode" mode=""></image>
			<view class="right-infor">
				<view style="width:342rpx;">Please have your friend scan the code to join</view>
				<view class="arrar">
					<image src="/static/image/share/arrar.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="my-invite">
			<view class="title">
				<image class="logo" src="/static/image/share/logo1.png" mode=""></image>
				<view class="name">我的邀請收益</view>
			</view>
			<view class="interval"></view>
			<view class="all-earnings">
				<view class="one-earnings">
					<view class="num">
						<view>0</view>
						<text>園</text>
					</view>
					<view class="name">收益在路上</view>
				</view>
				<view class="one-earnings">
					<view class="num">
						<view>0</view>
						<text>園</text>
					</view>
					<view class="name">累計收益</view>
				</view>
				<view class="one-earnings">
					<view class="num">
						<view>0</view>
						<text>人</text>
					</view>
					<view class="name">成功邀請</view>
				</view>
			</view>
		</view>
		<view class="my-invite">
			<view class="title">
				<image class="logo" src="/static/image/share/logo2.png" mode=""></image>
				<view class="name">我邀請的好友</view>
			</view>
			<view class="interval"></view>
			<view class="nav-box">
				<view class="one-nav" @click="chooseThis(0)" :class="{'active':chooseIndex==0}">直接好友</view>
				<view class="one-nav" @click="chooseThis(1)" :class="{'active':chooseIndex==1}">間接好友</view>
				<view class="nav-bar" :style="{left:navLeft+'rpx'}"></view>
			</view>
			<view class="one-list">
				<view class="name">邀請</view>
				<view class="phone">191****5551</view>
				<view class="status">邀請成功</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { inviteCode } from '../../../request/api.js'
	export default {
		data() {
			return {
				navLeft:43,
				chooseIndex:0,
				showCode:''
			};
		},
		onShow() {
			this.getMyCode()
		},
		methods:{
			async getMyCode(){
				let res=await inviteCode();
				console.log(res);
				if(res.code==1){
					this.showCode=res.data;
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			chooseThis(e){
				this.chooseIndex=e;
				this.navLeft=43+(e*160);
			},
			showRuler(){
				uni.navigateTo({
					url:'/pages/mine/inviet-ruler/inviet-ruler'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#FAFAFA;
		padding-bottom:100rpx;
		.top-img{
			width:100%;height:457rpx;
			image{
				width:750rpx;height:457rpx;
			}
		}
		.strategy{
			margin-top:60rpx;
			width:702rpx;margin-left: auto;
			height:102rpx;
			margin-right:auto;
			background-color:#ffffff;
			border-radius: 15rpx;
			box-shadow: 0 2rpx 12rpx 0 rgba(204,204,204,0.3);
			display: flex;align-items: center;
			justify-content: space-between;
			box-sizing: border-box;padding:0 24rpx;
			.infor-left{
				display: flex;align-items: center;
				font-size:30rpx;color:#040404;
				image{
					width:34rpx;height:34rpx;margin-right:24rpx;
				}
			}
			.more{
				width:10rpx;height:15rpx;
			}
		}
		.bg1{
			width:100%;height:243rpx;margin-top:100rpx;
			image{
				width:100%;height:243rpx;
			}
		}
		.my-code{
			display: flex;padding-left:48rpx;
			padding-right:30rpx;padding-bottom:40rpx;
			justify-content: space-between;
			background-color: #f5f5f5;padding-top:20rpx;
			.code{
				width:260rpx;height:260rpx;
			}
			.right-infor{
				font-size:26rpx;color:#040404;line-height:37rpx;
				margin-top:58rpx;font-weight: bold;
				.arrar{
					width:158rpx;height:103rpx;margin-top:26rpx;
					margin-left:120rpx;
					image{
						width:158rpx;height:103rpx;
					}
				}
			}
		}
		.my-invite{
			width:100%;
			background-image: url('/static/image/share/infor-bg.png');
			background-size: 100%;padding-bottom:24rpx;
			margin-top:30rpx;padding-top:18rpx;
			.title{
				display: flex;font-size:36rpx;align-items: center;
				margin-left:42rpx;
				.logo{
					width:142rpx;height:142rpx;margin-right:28rpx;
				}
			}
			.interval{
				width:654rpx;height:2rpx;background-color:rgba(42,49,67,0.1);
				margin-top:20rpx;margin-right:auto;margin-left:auto;
			}
			.all-earnings{
				margin-top:24rpx;width:654rpx;margin-left:auto;
				margin-right:auto;
				display: flex;align-items: center;justify-content: space-between;
				.one-earnings{
					width:192rpx;height: 240rpx;background-color:rgba(215,27,10,0.1);
					border-radius: 10rpx;display: flex;align-items: center;
					justify-content: center;flex-direction: column;
					.num{
						display: flex;align-items: center;font-size: 70rpx;
						line-height:98rpx;color:#D71B0A;
						text{
							font-size:30rpx;height:42rpx;margin-left:5rpx;
							margin-bottom:20rpx;
						}
					}
					.name{
						font-size:22rpx;color:#040404;line-height:30rpx;
					}
				}
			}
			.nav-box{
				width:654rpx;height:62rpx;display: flex;align-items: center;
				margin-left:auto;margin-right:auto;margin-top:20rpx;
				position: relative;font-size:26rpx;color:#9E9E9E;
				.one-nav{
					transition: all .3s;margin-right:40rpx;
					width:120rpx;
					text-align: center;
				}
				.active{
					font-size:30rpx;color:#040404;
				}
				.nav-bar{
					width:35rpx;height:5rpx;border-radius: 5rpx;position:absolute;
					bottom: 0;transition: all .3s;background-color: #D71B0A;
				}
			}
			.one-list{
				margin-top:24rpx;width:654rpx;height:100rpx;
				background-color:#F5F5F5;border-radius: 15rpx;
				display: flex;align-items: center;box-sizing: border-box;
				padding:0 24rpx;justify-content: space-between;
				margin-left:auto;margin-right:auto;font-size:26rpx;
				color:#040404;
				.status{
					color:#D71B0A;
				}
			}
		}
	}
</style>
